<template>
  <h2>权限审批</h2>
  <div class="ques-list">
    <el-row class="ques-head">
      <el-col :span="2">ID</el-col>
      <el-col :span="4">用户ID</el-col>
      <el-col :span="2">申请权限</el-col>
      <el-col :span="12">理由</el-col>
      <el-col :span="4">操作</el-col>
    </el-row>
    <div v-if="!pes || pes.length === 0 ">
      <el-empty description="申请列表为空"></el-empty>
    </div>
    <div v-else v-for="p in pes" :key="p.id">
      <div class="ques-row">
        <el-row style="display: flex;align-items: center">
          <el-col :span="2">{{p.id}}</el-col>
          <el-col :span="4">{{p.userId}}</el-col>
          <el-col :span="2">{{getRoleName(p.role)}}</el-col>
          <el-col :span="12">{{p.reason}}</el-col>
          <el-col :span="4">
            <el-tooltip placement="bottom" content="驳回">
                <el-icon class="m-manage-icon cpt" @click="approve(p.id , 2)" ><close/></el-icon>
            </el-tooltip>
            &nbsp;&nbsp;
            <el-tooltip placement="bottom" content="通过">
              <el-icon class="m-manage-icon cpt" @click="approve(p.id , 1)" ><check /></el-icon>
            </el-tooltip>
          </el-col>

        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {User} from "../../utils/http/user";
import {Check, Close} from "@element-plus/icons";

export default {
  name: "UserManage",
  components: {Close, Check},
  data : function (){
    return{
      pes : []
    }
  },
  methods:{
    getRoleName : User.getRoleName,
    async refresh(){
      let resp = await User.peGetAll()
      this.pes = resp.data?.pes;
    },
    async approve(id,app){
      let resp = await User.peApp({id:id,approval:app})
      if (resp.success){
        this.$success("审批成功")
        this.refresh()
      }else {
        this.$error("审批失败："+resp.message)
      }
    }
  },
  mounted() {
    this.refresh()
  }
}
</script>

<style scoped>
.ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}

.ques-row{
  padding: 10px 0;
}

.m-manage-icon {
  font-size: 20px;
  color: #53a8ff;
}

.cpt {
  cursor: pointer;
}
</style>
